<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>员工打卡系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <#include "common.ftl">
</head>
<body style="background-color: #F2F2F2; padding: 20px;">
    <!-- 欢迎信息 -->
    <div class="layui-card">
        <div class="layui-card-header">
            <h1>欢迎您，<span>${Session.user.userName!'未知用户'}</span></h1>
        </div>
        <div class="layui-card-body">
            <!-- 时间显示 -->
            <div class="layui-row" style="text-align: center;">
                <div class="layui-col-md12">
                    <div style="font-size: 36px; margin: 20px 0;">
                        <span id="currentDate" style="font-size: 24px; color: #666; margin-right: 20px;"></span>
                        <span id="currentTime"></span>
                    </div>
                </div>
            </div>
            
            <!-- 打卡按钮 -->
            <div class="layui-row" style="text-align: center; margin-top: 30px;">
                <div class="layui-col-md12">
                    <button class="layui-btn layui-btn-lg layui-btn-normal" id="punchBtn">
                        打卡
                    </button>
                </div>
            </div>
            
            <!-- 打卡状态 -->
            <div class="layui-row" style="text-align: center; margin-top: 20px;">
                <div class="layui-col-md12">
                    <p id="punchStatus" style="font-size: 16px; color: #666;"></p>
                </div>
            </div>
        </div>
    </div>

    <script src="/layui/layui.js"></script>
    <script>
    layui.use(['layer', 'jquery'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;

        // 更新时间显示
        function updateTime() {
            var now = new Date();
            var hours = String(now.getHours()).padStart(2, '0');
            var minutes = String(now.getMinutes()).padStart(2, '0');
            var seconds = String(now.getSeconds()).padStart(2, '0');

            var year = now.getFullYear();
            var month = String(now.getMonth() + 1).padStart(2, '0');
            var day = String(now.getDate()).padStart(2, '0');
            var weekDay = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];

            $('#currentTime').text(hours + ":" + minutes + ":" + seconds);
            $('#currentDate').text(year + "年" + month + "月" + day + "日 " + weekDay);
        }

        // 每秒更新时间
        updateTime();
        setInterval(updateTime, 1000);

        // 打卡按钮点击事件
        $('#punchBtn').on('click', function(){
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();

            // 判断打卡类型
            var clockType = hours < 12 ? 'in' : 'out';

            $.ajax({
                url: '/crm/clock/punch',
                type: 'POST',
                data: {
                    userName: '${Session.user.userName!}',
                    clockType: clockType,
                    clockTime: now.getTime()
                },
                success: function(res){
                    if(res.code === 0){
                        layer.msg('打卡成功！');
                        
                        // 判断打卡状态
                        var status = '';
                        if(clockType === 'in') {
                            if(hours >= 9 && (hours > 9 || minutes > 0)){
                                status = '<span style="color: #FF5722;">迟到</span>';
                            } else {
                                status = '<span style="color: #009688;">正常上班打卡</span>';
                            }
                        } else {
                            if(hours < 18){
                                status = '<span style="color: #FF5722;">早退</span>';
                            } else {
                                status = '<span style="color: #009688;">正常下班打卡</span>';
                            }
                        }
                        
                        $('#punchStatus').html('打卡时间：' + 
                            String(hours).padStart(2, '0') + ':' + 
                            String(minutes).padStart(2, '0') + ' - ' + status);
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function(){
                    layer.msg('网络错误，请稍后重试');
                }
            });
        });
    });
    </script>
</body>
</html>
